<template>
    <div class="workflow-canvas">
        <div class="canvas-toolbar">
            <el-button-group>
                <el-button size="small" @click="canvasActions.zoomIn">
                    <el-icon>
                        <ZoomIn />
                    </el-icon>
                </el-button>
                <el-button size="small" @click="canvasActions.zoomOut">
                    <el-icon>
                        <ZoomOut />
                    </el-icon>
                </el-button>
                <el-button size="small" @click="canvasActions.resetZoom">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-button-group>
        </div>
        <div ref="canvasContainer" class="canvas-container">
            <svg class="workflow-svg" :style="{ transform: `scale(${canvasState.zoomLevel.value})` }">
                <!-- Connections -->
                <g class="connections">
                    <path v-for="connection in workflow.connections" :key="`${connection.from}-${connection.to}`"
                        :d="canvasActions.getConnectionPath(connection)" class="connection-path"
                        :class="{ active: connection.active }" />
                </g>
                <!-- Nodes -->
                <g class="nodes">
                    <g v-for="node in workflow.nodes" :key="node.id" class="node-group"
                        :transform="`translate(${node.x}, ${node.y})`" @click="canvasActions.selectNode(node)">
                        <rect :width="canvasState.nodeWidth.value" :height="canvasState.nodeHeight.value" :rx="8"
                            class="node-rect"
                            :class="[`node-${node.type}`, { selected: canvasState.selectedNode.value?.id === node.id }]" />
                        <text :x="canvasState.nodeWidth.value / 2" :y="25" class="node-icon" text-anchor="middle">
                            {{ canvasActions.getNodeIcon(node.type) }}
                        </text>
                        <text :x="canvasState.nodeWidth.value / 2" :y="45" class="node-title" text-anchor="middle">
                            {{ node.title }}
                        </text>
                        <text :x="canvasState.nodeWidth.value / 2" :y="60" class="node-subtitle" text-anchor="middle">
                            {{ node.subtitle }}
                        </text>
                        <circle :cx="canvasState.nodeWidth.value - 10" cy="10" r="4" :class="`status-${node.status}`"
                            class="node-status" />
                    </g>
                </g>
            </svg>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { ZoomIn, ZoomOut, Refresh } from '@element-plus/icons-vue';

const props = defineProps({
    workflow: {
        type: Object,
        required: true
    },
    canvasState: {
        type: Object,
        required: true
    },
    canvasActions: {
        type: Object,
        required: true
    }
});

</script>

<style scoped>
.workflow-canvas {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
}

.canvas-toolbar {
    padding: 8px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

.canvas-container {
    height: 500px;
    overflow: auto;
    position: relative;
    background-image: radial-gradient(circle, #e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}

.workflow-svg {
    width: 100%;
    height: 100%;
    transform-origin: top left;
}

.node-group {
    cursor: pointer;
    transition: transform 0.2s;
}

.node-rect {
    fill: #fff;
    stroke: #b0b0b0;
    stroke-width: 1px;
}

.node-rect.selected {
    stroke: #409eff;
    stroke-width: 2px;
}

.node-rect.node-trigger {
    fill: #fce8e6;
}

.node-rect.node-condition {
    fill: #e6f4ea;
}

.node-rect.node-action {
    fill: #e8f0fe;
}

.node-icon {
    font-size: 1.2em;
}

.node-title {
    font-weight: bold;
    font-size: 0.9em;
}

.node-subtitle {
    font-size: 0.7em;
    fill: #666;
}

.connection-path {
    fill: none;
    stroke: #c0c4cc;
    stroke-width: 2px;
}

.connection-path.active {
    stroke: #67c23a;
}

.node-status {
    stroke: #fff;
    stroke-width: 1px;
}

.status-success {
    fill: #67c23a;
}

.status-running {
    fill: #e6a23c;
}

.status-failed {
    fill: #f56c6c;
}

.status-pending {
    fill: #909399;
}
</style>